<!--
 * @Descripttion:
 * @version:
 * @Author: QYFeng
 * @Date: 2021-04-19 22:28:37
 * @LastEditors: QYFeng
 * @LastEditTime: 2021-05-16 17:55:43
-->
<template>
  <div>
    <div class="header-wrap">
      <div class="center">
        <div class="logo" @click="routerLink('1', '/')">
          <img :src="configData.logo_top" alt="logo" srcset="" />
        </div>
        <el-menu
          :default-active="activeIndex"
          class="nav-wrap"
          mode="horizontal"
          active-text-color="#333333"
        >
          <el-menu-item index="1" @click="routerLink('1', '/')"
            >首页</el-menu-item
          >
          <el-submenu index="2">
            <template slot="title">公司简介</template>
            <el-menu-item
              index="2-1"
              @click="routerLink('2-1', '/companyProfile')"
              >公司简介</el-menu-item
            >
            <el-menu-item
              index="2-2"
              @click="routerLink('2-2', '/corporateBusiness')"
              >公司业务</el-menu-item
            >
            <el-menu-item index="2-3" @click="routerLink('2-3', '/brief')"
              >公司简讯</el-menu-item
            >
            <el-menu-item
              index="2-4"
              @click="routerLink('2-4', '/administrativeLicensing')"
              >行政许可</el-menu-item
            >
          </el-submenu>
          <el-menu-item index="3" @click="routerLink('3', '/staffSearch')"
            >员工查询</el-menu-item
          >
          <el-menu-item index="4" @click="routerLink('4', '/wordOrder')"
            >工单递交</el-menu-item
          >
          <el-menu-item index="5" @click="routerLink('5', '/homeVisits')"
            >上门拜访</el-menu-item
          >
          <el-menu-item index="6" @click="routerLink('6', '/socialRecruitment')"
            >社会招聘</el-menu-item
          >
          <el-menu-item index="7" @click="routerLink('7', '/productService')"
            >产品与服务</el-menu-item
          >
          <el-menu-item index="8" @click="routerLink('8', '/contactUs')"
            >联系我们</el-menu-item
          >
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: '1',
      configData: [] // 配置信息
    }
  },
  created () {
    this.$http.getConfig().then((res) => {
      if (res.data.code === 0) {
        this.configData = res.data.data
      } else {
        this.$message.error('请求失败，请重试！')
      }
    })
  },
  watch: {
    $route (toRouter, fromRouter) {
      this.doNavActive()
    }
  },
  methods: {
    doNavActive () {
      // 导航栏active状态更新
      // console.log('this.$route.meta.tab', this.$route.meta.tab)
      this.activeIndex = this.$route.meta.tab
    },
    routerLink (index, path) {
      this.activeIndex = index
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.header-wrap {
  background: #fff;
  max-width: 1920px;
  height: 98px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  .center {
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    .logo {
      width: 142px;
      height: 98px;
      overflow: hidden;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .el-menu--horizontal > .el-menu-item.is-active,
    .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
      border-bottom: none;
      font-weight: bold;
    }
    .el-menu--horizontal > .el-menu-item {
      color: #333;
      font-weight: 400;
      transition: 0s;
      font-size: 18px;
      height: 40px;
      line-height: 40px;
      padding: 0 15px;
    }
    .el-menu--horizontal > .el-menu-item.is-active::after {
      content: " ";
      position: absolute;
      left: 50%;
      margin-left: -20px;
      bottom: 0;
      width: 40px;
      height: 4px;
      background: #333333;
      border-radius: 5px;
    }
    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }
  }
}
//重置element样式
::v-deep {
  .header-wrap .el-menu--horizontal > .el-submenu .el-submenu__title {
    font-size: 18px;
    color: #333;
  }
  .header-wrap .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
    border-bottom: none;
  }
  .header-wrap
    .el-menu--horizontal
    > .el-submenu.is-active
    .el-submenu__title::after {
    content: " ";
    position: absolute;
    left: 50%;
    margin-left: -28px;
    bottom: 0;
    width: 40px;
    height: 4px;
    background: #333333;
    border-radius: 5px;
  }
  .header-wrap .el-menu--horizontal > .el-submenu .el-submenu__title {
    height: 40px;
    line-height: 40px;
    transition: 0s;
  }
}
</style>
